<template>
    <div class="pdf-preview">
        <div class="pdf-wrap">
            <!-- <vue-pdf-embed :source="source" :style="scale" class="vue-pdf-embed" :page="pageNum" /> -->
            <vue-pdf-embed :source="source" :style="scale" class="vue-pdf-embed"/>
        </div>
        <div class="page-tool">
            <!-- <div class="page-tool-item" @click="lastPage">上一页</div>
            <div class="page-tool-item" @click="nextPage">下一页</div> -->
            <!-- <div class="page-tool-item">{{pageNum}}/{{numPages}}</div> -->
            <!-- <div class="page-tool-item" @click="pageZoomOut">放大</div>
            <div class="page-tool-item" @click="pageZoomIn">缩小</div> -->
            <van-icon class="page-tool-item" name="minus" size="20" color="#ffffff" @click="pageZoomIn"/>
            <van-icon class="page-tool-item" name="plus" size="20" color="#ffffff" @click="pageZoomOut"/>
            
        </div>
    </div>
</template>

<script>
import { reactive, onMounted, computed, toRefs } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数

import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js' // 注意导入的写法
export default{
    props:['pdfUrl'],
    components:{
        VuePdfEmbed
    },
    setup(props){
        console.log(props.pdfUrl)
        const state = reactive({
            source: props.pdfUrl, //预览pdf文件地址
            pageNum: 1, //当前页面
            scale: 1, // 缩放比例
            numPages: 0, // 总页数
        });
        const scale = computed(() => `transform:scale(${state.scale})`)
        function lastPage() {
            if (state.pageNum > 1) {
                state.pageNum -= 1;
            }
        }
        function nextPage() {
            if (state.pageNum < state.numPages) {
                state.pageNum += 1;
            }
        }
        function pageZoomOut() {
            if (state.scale < 2) {
                state.scale += 0.1;
            }
        }
        function pageZoomIn() {
            if (state.scale > 1) {
                state.scale -= 0.1;
            }
        }

        onMounted(() => {
            const loadingTask = createLoadingTask(state.source);
            loadingTask.promise.then((pdf) => {
                console.log('12121212')
                state.numPages = pdf.numPages
            })
        })
        return{
            ...toRefs(state),
            pageZoomIn,
            pageZoomOut,
            nextPage,
            lastPage,
            scale
        }
    }
}

</script>
<style lang="css" scoped>
.pdf-preview {
    position: relative;
    height: calc(100% - 104px);
    /* padding-left: 20px; */
    box-sizing: border-box;
}
.pdf-wrap{
    height: 100%;
    /* overflow-y:auto ; */
    overflow:auto ;
} 
/* .vue-pdf-embed {
    text-align: center;
    width: 100%;
    border: 1px solid #e5e5e5;
    margin: 0 auto;
    box-sizing: border-box;
} */
 
.page-tool {
    position: absolute;
    bottom: 35px;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    background: rgb(66, 66, 66);
    color: white;
    border-radius: 19px;
    z-index: 100;
    cursor: pointer;
    margin-left: 50%;
    transform: translateX(-50%);
}
.page-tool-item {
    padding: 8px 15px;
    padding-left: 10px;
    cursor: pointer;
    font-size: 10px;
}
 
</style>